<template>
  <div v-if="article" class="blog-detail">
    <el-button type="text" class="back-button" @click="goBack">
      <el-icon><ArrowLeft /></el-icon>
      {{ $t('blog.backToList') }}
    </el-button>

    <article class="blog-article">
      <header>
        <el-tag type="primary" class="category-tag">
          {{ article.category }}
        </el-tag>
        <h1 class="article-title">{{ article.title }}</h1>
        <div class="article-meta">
          <span class="publish-date">
            <el-icon><Calendar /></el-icon>
            {{ formatDate(article.date) }}
          </span>
          <span class="reading-time">
            <el-icon><Clock /></el-icon>
            {{ article.readingTime }} min read
          </span>
        </div>
      </header>

      <div class="article-image">
        <img :src="article.image" :alt="article.title" />
      </div>

      <div class="article-content" v-html="article.content"></div>

      <footer class="article-footer">
        <div class="article-tags">
          <el-tag v-for="tag in article.tags" :key="tag" size="small" class="tag">
            {{ tag }}
          </el-tag>
        </div>

        <div class="share-buttons">
          <el-button circle>
            <el-icon><Share /></el-icon>
          </el-button>
          <el-button circle>
            <el-icon><Star /></el-icon>
          </el-button>
        </div>
      </footer>
    </article>

    <section class="related-articles" v-if="relatedArticles.length > 0">
      <h2 class="section-title">{{ $t('blog.relatedArticles') }}</h2>
      <div class="related-grid">
        <blog-card
          v-for="article in relatedArticles"
          :key="article.id"
          :article="article"
          @click="navigateToArticle(article.slug)"
        />
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft, Calendar, Clock, Share, Star } from '@element-plus/icons-vue'
import BlogCard from '@/components/blog/BlogCard.vue'
import { useBlogStore } from '@/stores/blog'

interface Article {
  id: number
  title: string
  slug: string
  excerpt: string
  content: string
  image: string
  category: string
  tags: string[]
  date: string
  readingTime: number
}

const route = useRoute()
const router = useRouter()
const blogStore = useBlogStore()

// 获取当前文章和相关信息
const article = computed<Article | undefined>(() =>
  blogStore.getArticleBySlug(route.params.slug as string),
)
const relatedArticles = computed<Article[]>(
  () => blogStore.getRelatedArticles(route.params.slug as string) || [],
)

// 格式化日期
const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
}

// 返回博客列表
const goBack = () => {
  router.push('/blog')
}

// 导航到相关文章
const navigateToArticle = (slug: string) => {
  router.push(`/blog/${slug}`)
}

// 确保文章数据加载
onMounted(() => {
  if (!article.value) {
    router.push('/blog')
  }
})
</script>

<style scoped>
.blog-detail {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

.back-button {
  margin-bottom: 30px;
  display: inline-flex;
  align-items: center;
}

.back-button .el-icon {
  margin-right: 5px;
}

.blog-article {
  margin-bottom: 60px;
}

.category-tag {
  margin-bottom: 15px;
}

.article-title {
  font-size: 2.2rem;
  margin: 0 0 15px 0;
  line-height: 1.3;
}

.article-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  color: var(--el-text-color-secondary);
}

.article-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.article-image {
  margin: 30px 0;
}

.article-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.article-content {
  line-height: 1.8;
  font-size: 1.1rem;
}

.article-content :deep(h2) {
  font-size: 1.6rem;
  margin: 40px 0 20px 0;
  color: var(--el-text-color-primary);
}

.article-content :deep(h3) {
  font-size: 1.3rem;
  margin: 30px 0 15px 0;
  color: var(--el-text-color-primary);
}

.article-content :deep(p) {
  margin-bottom: 20px;
  color: var(--el-text-color-regular);
}

.article-content :deep(a) {
  color: var(--el-color-primary);
  text-decoration: none;
}

.article-content :deep(a:hover) {
  text-decoration: underline;
}

.article-content :deep(ul),
.article-content :deep(ol) {
  margin: 20px 0;
  padding-left: 20px;
}

.article-content :deep(li) {
  margin-bottom: 10px;
}

.article-content :deep(blockquote) {
  border-left: 4px solid var(--el-color-primary);
  padding-left: 20px;
  margin: 20px 0;
  color: var(--el-text-color-secondary);
  font-style: italic;
}

.article-content :deep(pre) {
  background-color: var(--el-bg-color-page);
  padding: 15px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 20px 0;
}

.article-content :deep(code) {
  font-family: monospace;
  background-color: var(--el-bg-color-page);
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 0.9em;
}

.article-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid var(--el-border-color-light);
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.share-buttons {
  display: flex;
  gap: 10px;
}

.related-articles {
  margin-top: 60px;
}

.section-title {
  font-size: 1.8rem;
  margin-bottom: 30px;
  color: var(--el-text-color-primary);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}

@media (max-width: 768px) {
  .article-title {
    font-size: 1.8rem;
  }

  .article-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}
</style>
